import React from 'react'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, message } from 'antd';
import './Login.css';
import Particles from 'react-particles-js';
import axios from 'axios';
import { withRouter } from 'react-router-dom';
function Login(props) {

    const onFinish = (values) => {
        const { username, password } = values
        axios.get(`/users?username=${username}&password=${password}&roleState=true&_expand=role`).then(res => {
            if (res.data.length === 0) return message.error('账号密码错误')
            localStorage.setItem('token', JSON.stringify(res.data[0]))
            props.history.push('/')

        })
    };
    return (
        <div style={{ background: 'rgba(35,39,65)', height: '100vh' }}>
            <Particles height={document.documentElement.clientHeight} />
            <div className='formBox'>
                <div className='formBox_title'>全球新闻发布系统</div>
                < Form
                    name="normal_login"
                    className="login-form"
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="username"
                        rules={[{ required: true, message: '请输入用户名!' }]}
                    >
                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{ required: true, message: '请输入密码!' }]}
                    >
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="Password"
                        />
                    </Form.Item>
                    <Form.Item>
                        <Form.Item name="remember" valuePropName="checked" noStyle>
                            <Checkbox >记住密码</Checkbox>
                        </Form.Item>

                        <a className="login-form-forgot" href="">
                            忘记密码
                        </a>
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button">
                            登录
                        </Button>
                        或者 <a href="">立即注册!</a>
                    </Form.Item>
                </Form>
            </div>
        </div >
    )
}

export default withRouter(Login)
